<template>
	<view class="uni_box home">
		<navbar title='申请退款'>
		</navbar>
		<view class="content">
			<view class="quanview">
				<text class="tuiqian">退款金额：<text class="tuijine">9.99元</text></text>
				<text class="buke">退款金额不可修改</text>
				<view class="shuview" @click="tuishow=true">
					<text class="xing">*</text>
					<text class="tuiyuan">退款原因</text>
					<view class="tuiyuanright">
						<text class="tuirit" :class="tuiinfo.value?'yuan':''">{{ tuiinfo.value?tuiinfo.value:'请选择退款原因' }}</text>
						<u-icon class="xiala" name="arrow-down" color="#999999" size="25"></u-icon>
					</view>
				</view>
				<view class="liji" @click="tishen">提交申请</view>
			</view>
		</view>

		<!-- 退款选择 -->
		<u-select v-model="tuishow" :list="tuilist" label-name="name" value-name="id" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				id:'',
				tuilist:[],
				tuiinfo:{

				},
				tuishow:false,

				placeholderStyle:"color: #c0c4cc;font-size: 24rpx;"
			}
		},
		onLoad(option) {
			this.id = option.id
			this.gettuilist();//获取退款列表
		},
		onShow() {
		},
		methods: {
			async gettuilist(){
				let res = await this.$u.api.getRefundDes({
					shop_id:uni.getStorageSync('shop_id')
				});
				let shu = res
				let shuzu = []
				for(let i in shu){
					let a ={}
					a.name = shu[i]
					a.id = shu[i]
					shuzu.push(a)
				}
				this.tuilist = shuzu
			},
			confirm(e){
				console.log(e)
				this.tuiinfo = e[0]
			},
			async tishen(){
				if(!this.tuiinfo.value){
					this.$u.toast("请选择退款原因");
					return false
				}
				let res = await this.$u.api.refundVipOrder({
					shop_id:uni.getStorageSync('shop_id'),
					order_id:this.id,
					refund_des:this.tuiinfo.value
				});
				this.$u.toast("已提交申请");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		padding: 20rpx 0;
		.tuiqian{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.tuijine{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #E43E3E;
		}
		.buke{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			display: block;
			margin: 20rpx 0 50rpx;
		}
		.quanview{
			margin:0 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx 30rpx;
			.shutit{
				font-size: 36rpx;
				font-family: Alimama ShuHeiTi;
				font-weight: bold;
				color: #333333;
			}
			.shuview{
				position: relative;
				height: 88rpx;
				background: #EEEEEE;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 20rpx;
				margin: 30rpx 0;
				.xing{
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #E43E3E;
					display: inline-block;
					margin-right: 8rpx;
				}
				.tuiyuan{
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #444444;
				}
				.tuiyuanright{
					margin-left: auto;
					display: flex;
					flex-direction: row;
					align-items: center;
					.tuirit{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.yuan{
						color: #333;
					}
					.xiala{
						margin-left: 8rpx;
					}

				}
			}
			.shumiao{
				display: flex;
				flex-direction: column;
				.mitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					.quan{
						width: 12rpx;
						height: 12rpx;
						background: #CCCCCC;
						border-radius: 50%;
						display: inline-block;
						margin-right: 8rpx;
					}
					.duitit{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
			.liji{
				height: 88rpx;
				background: #216CFE;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 50rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>
